<template>
  <div class="app-container">
    <data-table
      ref="customTable"
      :request="page"
      :search-form="searchForm"
    >
      <template slot="search">
        <el-form-item prop="sysId">
          <el-input
            v-model="searchForm.sysId"
            type="text"
            placeholder="系统编号"
          />
        </el-form-item>
        <el-form-item prop="keyName">
          <el-input
            v-model="searchForm.keyName"
            type="text"
            placeholder="配置key"
          />
        </el-form-item>
      </template>
      <template slot="function">
        <el-button
          v-permission="['function:admin:config:add']"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >新增</el-button>
      </template>
      <template slot="tableColumns">
        <el-table-column
          prop="id"
          label="ID"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="sysId"
          label="配置系统"
        />
        <el-table-column
          prop="keyName"
          label="配置名称"
        />
        <el-table-column
          prop="keyValue"
          label="配置值"
        />
        <el-table-column
          prop="action"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                v-permission="['function:admin:config:edit']"
                type="primary"
                icon="el-icon-edit"
                circle
                @click.native.prevent="edit(scope.$index, scope.row)"
              />
              <el-button
                v-permission="['function:admin:config:remove']"
                type="danger"
                icon="el-icon-delete"
                circle
                @click.native.prevent="remove(scope.$index, scope.row)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </template>
    </data-table>
    <el-dialog
      :title="customFormInitOption.title"
      :visible.sync="customFormInitOption.showModal"
      :close-on-click-modal="false"
      top="2vh"
    >
      <ConfigForm
        ref="customForm"
        :action="customFormInitOption.action"
      />
      <div slot="footer">
        <el-button
          type="primary"
          @click="handleSubmit"
        >保存</el-button>
        <el-button
          v-if="customFormInitOption.action === 'add'"
          type="danger"
          @click="reset"
        >重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DataTable from '@/components/datatable/data-table';
import ConfigForm from '@/views/admin/config/form';
import { remove, page } from '@/api/admin/config';

export default {
  components: {
    DataTable,
    ConfigForm
  },
  data() {
    return {
      page: page,
      searchForm: {
        sysId: '',
        keyName: ''
      },
      customFormInitOption: {
        title: '',
        action: '',
        showModal: false
      }
    };
  },
  methods: {
    handleAdd() {
      this.customFormInitOption.title = '新增配置';
      this.customFormInitOption.action = 'add';
      this.customFormInitOption.showModal = true;
      this.$nextTick(() => {
        this.$refs.customForm.reset();
      });
    },
    edit(index, row) {
      this.customFormInitOption.title = '编辑配置';
      this.customFormInitOption.action = 'edit';
      this.customFormInitOption.showModal = true;
      this.$nextTick(() => {
        this.$refs.customForm.getInfo(row.id);
      });
    },
    remove(index, row) {
      this.$confirm('确定删除名称为【' + row.keyName + '】的配置吗？', '请确认', {
        type: 'warning'
      }).then(() => {
        remove(row.id).then(response => {
          const result = response.data;
          let title, type, text;
          if (result.code === 0) {
            title = '成功';
            type = 'success';
          } else {
            title = result.code;
            text = result.msg;
            type = 'error';
          }
          this.$notify({
            title: title,
            message: text,
            type: type
          });
          this.$refs.customTable.query();
        });
      }).catch(() => { });
    },
    handleSubmit() {
      this.$refs.customForm.handleSubmit();
    },
    reset() {
      this.$refs.customForm.sonFormData = [];
      this.$refs.customForm.count = 0;
      this.$refs.customForm.reset();
    }
  }
};
</script>
